import Taro, { Component } from '@tarojs/taro'
import { View,Image } from '@tarojs/components'
import { AtInput } from 'taro-ui'
import MyButton from '../../components/base/MyBase'
import './login.less'
import logo from '../../assets/logo.png'
// import cf from '../../store/modules/cfStore'
import loginStore from '../../store/login'
import {setStorage} from '../../util/common'

class Login extends Component {
  constructor() {
    super()
    this.state = {
      tel: '',
      code: ''
    }
  }
  componentWillMount() { }
  componentDidMount() { }
  componentWillUnmount() { }
  componentWillReact() { }
  config = {
    navigationBarTitleText: '登录易理赔'
  }
  componentDidShow() { }
  componentDidHide() { }
  telChange = (val) => {
    this.setState({
      tel: val
    })
  }
  codeChange = (val) => {
    this.setState({
      code: val
    })
  }
  getCode=() => {
    console.info('getCode() in login')
    const {getCode} = loginStore
    const {tel} = this.state
    getCode({tel})
  }
  login=() => {
    console.info('login()')
    const {login} = loginStore
    const params ={...this.state}
    login(params).then(res => {
      // 将数据写到loginStore当中
      loginStore.loginInfo = res.data
      setStorage('loginInfo',res.data)
      Taro.navigateTo({url: '/pages/index/index'})
    })
  }
  render() {
    const { tel, code } = this.state
    return (
      <View className='login'>
        <View className='login-header'>
          <Image src={logo} mode='widthFix' />
        </View>
        <View className='login-body'>
          <View className='at-row login-tel-item'>
            <View className='at-col at-col-8 login-tel-input'>
              <AtInput
                value={tel}
                placeholder='手机号'
                name='tel'
                type='phone'
                onChange={this.telChange}

              ></AtInput>
            </View>
            <View className='at-col at-col-4'>
              <MyButton onHandleButtonClick={this.getCode}>获取验证码</MyButton>
            </View>
          </View>
          <View className='login-code-item'>
            <AtInput
              placeholder='验证码'
              value={code}
              onChange={this.codeChange}
            ></AtInput>
          </View>
        </View>
        <View className='login-foot'>
        <MyButton bg='red' 
          onHandleButtonClick={this.login}
        >登录</MyButton>
        </View>
        {/* <MyButton size='middle'>默认</MyButton>
        
        <MyButton bg='green'>绿色</MyButton>
        <MyButton bg='trans' color='gray' >边框</MyButton> */}
      </View>
    )
  }
}

export default Login 
